<template>
  <div
    v-if="detailData"
    class="base-info-view"
  >
    <el-form
      class="form-detail"
      label-position="right"
      label-width="140px"
      style="padding-left:20px;"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-form-item
          label="代理名称："
          style="width: 50%"
        >
          <div>{{ detailData.customerName }}</div>
        </el-form-item>
        <el-form-item
          label="代理类型："
          style="width: 50%"
        >
          <div>{{ getLabel('returned_money_type', detailData.customerType) }}</div>
        </el-form-item>
        <el-form-item
          label="保证金："
          style="width: 50%"
        >
          <div class="flow-status-color">{{ moneyFormat(detailData.splitAmount) }}元</div>
        </el-form-item>
        <el-form-item
          label="付款开户行："
          style="width: 50%"
        >
          <div>{{ detailData.bankName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="付款银行账号："
          style="width: 50%"
        >
          <div>{{ detailData.bankNumber || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="付款日期："
          style="width: 50%"
        >
          <div v-if="detailData.payTime">{{ dateFormat('yyyy-mm-dd', detailData.payTime) }}</div>
          <div v-else>无</div>
        </el-form-item>
        <el-form-item
          label="负责营销职员："
          style="width: 50%"
        >
          <div>{{ detailData.headName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="关联收款编号："
          style="width: 50%"
        >
          <my-tooltip
            :content="detailData.receiveNumber"
            @click="toReturnMoneyDetail"
          />
        </el-form-item>
        <template v-if="detailData.receiveMoneySplitStatus==='2'||detailData.receiveMoneySplitStatus==='3'||detailData.receiveMoneySplitStatus==='4'">
          <el-form-item
            label="处置类型："
            style="width: 50%"
          >
            <span v-if="detailData.receiveMoneySplitStatus==='2'||detailData.receiveMoneySplitStatus==='4'">退回客户</span>
            <span v-if="detailData.receiveMoneySplitStatus==='3'">扣款</span>
          </el-form-item>
          <el-form-item
            label="金额："
            style="width: 50%"
          >
            <div class="flow-status-color">{{ moneyFormat(detailData.backAmount) }}元</div>
          </el-form-item>
        </template>
        <el-form-item
          label="款项描述："
          style="width: 100%"
        >
          <div>{{ detailData.remark || '无' }}</div>
        </el-form-item>
      </el-row>
    </el-form>
    <!-- 收款详情 -->
    <detail-drawer
      ref="detailDrawer"
      custom-title
    >
      <template #title>
        <span style="margin-right:5px;">收款详情 - {{ detailData?.receiveNumber }}</span>
      </template>
      <template #contents>
        <div class="drawer-content">
          <div class="history-list">
            <item-title title="基本信息" />
            <payee-info
              v-if="detailData?.receiveMoneyId"
              :id="detailData?.receiveMoneyId"
            />
          </div>
          <div
            v-if="detailData?.receiveStatus === '3'"
            class="history-list"
            style="margin-bottom: 20px"
          >
            <item-title title="分账处理结果" />
            <payee-split-info :row="{id: detailData?.receiveMoneyId, customerType: detailData?.customerType}" />
          </div>
          <div class="history-list">
            <item-title title="操作记录" />
            <operation-view
              :id="detailData?.receiveMoneyId"
              mode="receive_money"
            />
          </div>
        </div>
      </template>
    </detail-drawer>
  </div>
</template>

<script>
import {defineAsyncComponent, reactive, toRefs, watch} from 'vue'

export default {
  name: 'BaseInfo',
  components: {
    payeeInfo: defineAsyncComponent(() =>
      import('@CRM/views/returnedRecords/returnedMoney/modules/payeeInfo.vue')
    ),
    payeeSplitInfo: defineAsyncComponent(() =>
      import(
        '@CRM/views/returnedRecords/returnedMoney/modules/payeeSplitInfo.vue'
      )
    ),
  },
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    var detail = reactive({
      detailDrawer: null,
      detailData: props.detailData,
    })
    const toReturnMoneyDetail = () => {
      detail.detailDrawer.open()
    }
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          detail.detailData = newval
        }
      },
      { immediate: true }
    )
    return {
      ...toRefs(detail),
      toReturnMoneyDetail,
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
